<include file="default/User/layout" />
<block name="main">
    <div class="col-xs-12">
        <form class="form-horizontal login-form" action="">
            <div class="row login-title">
                <div class="col-xs-12 login-tab">
                    <a href="{:U('user/register')}" class="active">用户注册</a>
                </div>
            </div>
            <div class="row">
                <div class="one-loginin col-xs-7">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label">用户名</label>
                            <input type="text" name="user" class="form-control" data-toggle="tooltip" data-tip-class="tooltip-info" title="请输入用户名"  placeholder="请输入用户名">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label">手机号</label>
                            <input type="text" name="phone" class="form-control"  data-toggle="tooltip" data-tip-class="tooltip-info" title="请输入手机号" placeholder="请输入手机号">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label">邮箱：</label>
                            <input type="email" name="email" class="form-control"  data-toggle="tooltip" data-tip-class="tooltip-info" title="请输入邮箱" placeholder="请输入邮箱">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label">密码</label>
                            <input type="password" name="pwd" class="form-control"  data-toggle="tooltip" data-tip-class="tooltip-info" title="请输入密码"  placeholder="请输入密码">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label">确认密码</label>
                            <input type="password" name="confirm" class="form-control"  data-toggle="tooltip" data-tip-class="tooltip-info" title="确认密码"  placeholder="确认密码">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label">验证码</label>
                            <div class="tel-box">
                                <div class="tel-btn">
                                    <button type="button" class="btn phone_code_send">发送验证码</button>
                                </div>
                                <div class="tel-input">
                                    <input type="text" name="code" data-toggle="tooltip" data-tip-class="tooltip-info" title="请输入验证码" class="form-control" placeholder="请输入验证码">
                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        $('[data-toggle="tooltip"]').tooltip({
                            tipClass: 'tooltip-info'
                        });
                        var enable = true;
                        $('.phone_code_send').click(function(event) {
                            if(enable == false) {
                                return;
                            }
                            var phone = $('input[name=phone]').val();
                            if(phone==''){
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('手机号不能为空');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            enable = false;

                            $.ajax({
                                url: '{:U("user/send_code")}',
                                dataType: 'json',
                                cache: false,
                                data: {phone: phone},
                                success: function(data) {
                                    if(data.status != 0) {
                                        alert(data.message);
                                        return;
                                    }
                                    var num = 30;
                                    var interval = window.setInterval(function() {
                                        $('.phone_code_send').html(--num + 's 重发送');
                                        if(num == 0) {
                                            enable = true;
                                            window.clearInterval(interval);
                                            $('.phone_code_send').html('重发送');
                                        }
                                    }, 1000);
                                },
                                error: function(xhr, status, error) {
                                    console.log(xhr);
                                    console.log(status);
                                    console.log(error);
                                }
                            });


                        })
                    </script>




                    <script>
                        function onRegisterClick() {

                            var user = $('input[name=user]').val();
                            var pwd = $('input[name=pwd]').val();
                            var phone = $('input[name=phone]').val();
                            var code = $('input[name=code]').val();
                            var email = $('input[name=email]').val();
                            var confirm = $('input[name=confirm]').val();
                            if(verifyPhone(user,phone, pwd, code,email,confirm) == false) {
                                return;
                            }
                            $.ajax({

                                type: "POST",
                                url: '{:U("user/register_c")}',
                                dataType:'json',
                                cache: false,
                                data: {user:user,phone:phone, pwd:pwd,code:code,email:email},
                                success:function(data) {
                                    if(data.status != 0) {
                                        alert(data.message);
                                        return;
                                    }
                                    $('#myModal').modal();
                                    setTimeout(function(){
                                        location.href='{:U("user/login")}';
                                    },5000);
                                },
                                error: function(xhr, status, error) {
                                    console.log(xhr);
                                    console.log(status);
                                    console.log(error);
                                }
                            });
                        }

                        function verifyPhone(user,phone, pwd, code,email,confirm) {
                            // 手机号不为空
                            if(user == '') {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('用户名不能为空');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            // 手机号不为空
                            if(user.length < 4||user.length>32) {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('用户名不能大于32位小于4位');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            // 手机号不为空
                            if(phone == '') {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('手机号不能为空');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            // 手机号格式
                            if(phone.length != 11 || phone[0] != '1') {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('手机格式不正确');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            if(pwd == '' || confirm == '') {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('密码不能为空');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            if(pwd.length < 6 || confirm.length < 6) {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('密码不能少于6位');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            if(pwd != confirm) {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('两次密码不相同!');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            if(code == '') {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('手机验证码不能为空!');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            if(email == '') {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('请输入邮箱');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            if(email.indexOf('@') == -1 || email.indexOf('.') == -1) {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('邮箱格式不正确');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            if(code.length != 4) {
                                $('.bk_toptips').show();
                                $('.bk_toptips span').html('手机验证码为4位!');
                                setTimeout(function() {$('.bk_toptips').hide();}, 2000);
                                return false;
                            }
                            return true;
                        }




                    </script>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <a  class="btn btn-primary" href="javascript:" onclick="onRegisterClick();">立即注册</a>
                        </div>
                    </div>

                </div>
                <div class="other-loginin col-xs-5">
                    <div class="row">
                        <div class="col-xs-12">
                            <p>已注册帐号？</p>
                            <a href="{:U('user/login')}" class="btn btn-primary btn-block btn-submit">立即登录</a>
                        </div>
                        <div class="col-xs-12 login-fr">
                            <p>您还可以使用其他方式登录</p>
                            <div class="login-way">
                                <a href="{:U('user/login_san')}"><i class="icon icon-qq"></i></a>
                                <a href="{:U('user/login_san')}"><i class="icon icon-weixin"></i></a>
                                <a href="{:U('user/login_san')}"><i class="icon icon-zhifubao"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bk_toptips" style="color:red;"><span></span></div>
        </form>
    </div>


    <div class="modal fade" id="myModal" >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <p>恭喜您注册成功，即将跳到登陆页面</p>
                </div>
            </div>
        </div>
    </div>


</block>


